<script setup lang="ts">
import { computed, onMounted, ref } from "vue";

const tabs = ref([
  {
    name: "创意设计",
  },
  {
    name: "编程语言",
  },
  {
    name: "模块与电路",
  },
  {
    name: "创新思维",
  },
]);
const activeIndex = ref(0); // 默认激活第一个Tab

const functionClick = (index) => {
  activeIndex.value = index;
};

import Swiper from "swiper/bundle";

import "swiper/css/bundle";

// const dynamicStyles = computed((index) => ({
//   color: index == 0 ? "#fc7269" : "#fdb252",
// }));
const getItemStyle = (idx) => {
  if (idx === 0) {
    return {
      color: "#F93E3E",
    };
  } else if (idx === 1) {
    return {
      color: "#FB7D08",
    };
  } else if (idx === 2) {
    return {
      color: "#FCA626",
    };
  } else {
    return {
      color: "#34B8FA",
    };
  }
};

const slideStyle = (index) => {
  return {
    backgroundImage:
      index === 0
        ? "linear-gradient( 360deg, #FFFFFF 83%, #FEF1F0 100%)"
        : index === 1
        ? "linear-gradient( 360deg, #FFFFFF 82%, #FFF5D2 100%)"
        : "linear-gradient( 360deg, #FFFFFF 71%, #FAFDFF 90%, #EAF6FC 100%)",
  };
};

onMounted(() => {
  const Classroom_0 = new Swiper(".Classroom_0", {
    // 循环模式选项
    loop: true,
    // autoplay: {
    //   delay: 2500,
    //   disableOnInteraction: false,
    // },
    // 设置平滑
    slidesPerView: 1,
    spaceBetween: 1,
    // 设置能够同时显示的数量（可设置 auto）
    speed: 500,

    // Navigation arrows
    navigation: {
      nextEl: ".Classroom_0 .swiper-button-next",
      prevEl: ".Classroom_0 .swiper-button-prev",
    },

    scrollbar: {
      el: ".swiper-scrollbar",
    },
  });

  const Classroom_1 = new Swiper(".Classroom_1", {
    // 循环模式选项
    loop: true,
    // autoplay: {
    //   delay: 2500,
    //   disableOnInteraction: false,
    // },
    // 设置平滑
    slidesPerView: 1,
    spaceBetween: 17,
    // 设置能够同时显示的数量（可设置 auto）
    speed: 500,

    // Navigation arrows
    navigation: {
      nextEl: ".Classroom_1 .swiper-button-next",
      prevEl: ".Classroom_1 .swiper-button-prev",
    },

    scrollbar: {
      el: ".swiper-scrollbar",
    },
  });

  const Classroom_2 = new Swiper(".Classroom_2", {
    // 循环模式选项
    loop: true,
    // autoplay: {
    //   delay: 2500,
    //   disableOnInteraction: false,
    // },
    // 设置平滑
    slidesPerView: 1,
    spaceBetween: 17,
    // 设置能够同时显示的数量（可设置 auto）
    speed: 500,

    // Navigation arrows
    navigation: {
      nextEl: ".Classroom_2 .swiper-button-next",
      prevEl: ".Classroom_2 .swiper-button-prev",
    },

    scrollbar: {
      el: ".swiper-scrollbar",
    },
  });
});
</script>

<template>
  <div>
    <div style="margin: 47px 0 30px; font-size: 22px; font-weight: bold">
      本周课程排行
    </div>

    <div style="display: flex; justify-content: space-between">
      <div
        v-for="(item, index) in 3"
        class="swiper"
        :class="`Classroom_${index}`"
      >
        <div class="swiper-button-prev"></div>

        <div class="swiper-wrapper" style="height: 96.5% !important">
          <!-- Slides -->
          <div class="swiper-slide" :style="slideStyle(index)">
            <div
              :style="{
                color:
                  index === 0 ? '#fc7269' : index === 1 ? '#fdb252' : '#34B8FA',
                marginBottom: '20px',
              }"
            >
              <span class="top">
                {{
                  index === 0
                    ? "热门排行"
                    : index === 1
                    ? "新课排行"
                    : "人气排行"
                }}
              </span>
              <span>Top10</span>
            </div>
            <div>
              <div
                style="display: flex; margin-bottom: 20px"
                v-for="(it, idx) in 5"
                :key="idx"
              >
                <div :style="getItemStyle(idx)">{{ idx + 1 }}</div>
                <img
                  src="@/assets/images/CloudClassroom/Popular_One.png"
                  alt=""
                  style="width: 108px; height: 74px; margin: 0 12px"
                />
                <div
                  style="
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                  "
                >
                  <div>创意设计·课程主题课程课 程主题</div>
                  <div style="color: #666666; font-size: 12px">
                    讲课老师:月亮老师
                  </div>
                </div>
              </div>
            </div>
            <!-- <img
              src="@/assets/images/home/student_one.png"
              alt=""
              style="width: 315px; height: 212px"
            />
            <div style="width: 315px; margin-top: 13px; text-align: center">
              《小黄猫马里奥》
            </div>
            <div style="width: 315px; margin: 16px 0 18px">
              编程很有意思，好玩又有趣，锻炼了我的创造力， 挺喜欢上课的。
            </div>
            <div style="display: flex; width: 315px; justify-content: flex-end">
              <img
                src="@/assets/images/home/people.png"
                style="width: 37px; height: 37px"
                alt=""
              />
              <div style="line-height: 37px">壮壮</div>
            </div> -->
          </div>
        </div>

        <div class="swiper-button-next"></div>
      </div>
      <!-- <div class="live_box" v-for="item in 3">
        <div class="live_img">
          <div
            style="
              width: fit-content;
              padding: 5px;
              background-color: #aaaaaa;
              border-radius: 8px 0px 8px 0px;
            "
          >
            <i class="iconfont icon-shijian"></i>
            <span style="color: #ffffff; margin-left: 6px">未开始</span>
          </div>
        </div>
        <div style="padding: 10px 8px">
          <div style="font-weight: bold; font-size: 16px">
            创意设计·课程名称课程名称课程称...
          </div>
          <div style="color: #666666; font-size: 12px; margin-top: 10px">
            <div>1月14日 09:00-10:00</div>
            <div>任课老师:月亮老师</div>
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<style lang="scss" scoped>
.swiper {
  // width: 389.04px;
  width: 32%;
  // width: 410px;
  // height: 430px;
  .swiper-slide {
    padding: 25px;
    border-radius: 16px 16px 16px 16px;
    .top {
      font-weight: bold;
      font-size: 18px;
    }
    // background: #ffffff;
    // box-shadow: 2px 7px 9px 1px rgba(39, 128, 166, 0.1);
    //   width: 360px;
    //   height: 405px;
  }
}

.swiper-button-prev,
.swiper-button-next {
  margin-top: -11px;
  width: 33px;
  height: 38px;
  color: #ffffff;
  background-color: rgba(40, 39, 39, 0.1);
}
.swiper-button-prev,
.swiper-rtl .swiper-button-prev {
  left: 0;
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  right: 0;
}
.swiper-button-prev:after,
.swiper-button-next:after {
  font-size: 26px;
}

.icon-shijian {
  color: #fff;
}
.live_img {
  width: 100%;
  height: 206.43px;
  background-size: contain;
  background: url("@/assets/images/CloudClassroom/live_three.png") no-repeat
    center/cover;
}
.live_box {
  width: 24%;
  background-color: #fff;
  border-radius: 8px 8px 8px 8px;
}
.function {
  margin: 13px 0 22px;
  width: 88px;
  height: 36px;
  margin-right: 20px;
  line-height: 36px;
  cursor: pointer;
  text-align: center;
  border: 1px solid #dddddd;
  border-radius: 18px 18px 18px 18px;
  box-shadow: 0px 1px 4px 0px rgba(102, 102, 102, 0.25);
}
.active-tab {
  background: linear-gradient(to bottom, #a7dffb, #1ca9eb);
}
</style>
